
<!--
 * @Description  : 
 * @Autor        : 杜康
 * @Date         : 2023-08-03 11:14:37 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-08-03 11:52:34 +0800
-->
<template>
  <div class="record">
    <h1>{{ tipMsg }}</h1>
    <h3>录音时长：{{ recorder?.duration }}</h3>
    <el-button type="success" @click="onStartVoice">开始</el-button>
    <el-button type="danger" @click="onEndVoice">结束</el-button>
    <el-button type="primary" @click="onPlayAudio">播放</el-button>
    <div class="record-play" v-show="isFinished">
      <h2>Current voice player is:</h2>
      <audio id="audioVoice" controls autoplay></audio>
    </div>
  </div>
</template>

<script>
import Record from "@/utils/recorder/record-sdk";
export default {
  data() {
    return {
      isVoice: false,
      isFinished: false,
      tipMsg: "录音",
      audio: "",
      recorder: new Record(),
      voices: "",
    };
  },
  methods: {
    // 开始录音
    onStartVoice() {
      this.onStopAudio();
      this.isFinished = false;
      this.recorder.startRecord({
        success: (res) => {
          this.isVoice = true;
        },
        error: (e) => {
          this.isVoice = false;
          this.$toast(e);
        },
      });
    },

    // 结束录音
    onEndVoice() {
      this.isFinished = false;
      this.recorder.stopRecord({
        success: (res) => {
          this.isVoice = false;
          //此处可以获取音频源文件(res)，用于上传等操作
          console.log("音频源文件", res);
        },
        error: (e) => {
          this.isVoice = false;
        },
      });
    },

    // 播放录音
    onPlayAudio() {
      this.isVoice = false;
      this.isFinished = true;
      this.audio = document.getElementById("audioVoice");
      this.recorder.play(this.audio);
    },

    // 停止播放录音
    onStopAudio() {
      if (this.audio) {
        this.recorder.clear(this.audio);
      }
    },
  },
};
</script>

<style></style>
